<template>
  <div class="training-platform">


    <!-- 新增的侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <div class="logo">
          <span>模拟攻防练习</span>
        </div>
        <button class="new-chat-btn" @click="goToHome">
          <i class="fas fa-home"></i> 返回首页
        </button>
      </div>

      <div class="lab-history">
        <div class="section-title">练习历史</div>
        <div
            v-for="lab in labHistory"
            :key="lab.id"
            class="lab-item"
            :class="{ active: activeLabId === lab.id }"
        >
          <i class="fas fa-vial"></i>
          <span class="truncate">{{ lab.title }}</span>
          <span class="time">{{ formatTime(lab.time) }}</span>
        </div>
      </div>

      <div class="sidebar-menu">
        <div class="menu-item" @click="toggleSqlInjectionOptions">
          <i class="fas fa-bug"></i>
          <span>SQL注入练习</span>
          <i :class="showSqlInjectionOptions ? 'fas fa-chevron-up' : 'fas fa-chevron-down'" class="ml-auto"></i>
        </div>
        <div v-show="showSqlInjectionOptions" class="submenu">
          <div 
            class="menu-item submenu-item" 
            :class="{ active: currentLabType === 'sql-injection-1' }"
            @click="loadLab('sql-injection-1')">
            <i class="fas fa-angle-right"></i>
            <span>简易SQL注入攻击练习</span>
          </div>
          <div 
            class="menu-item submenu-item" 
            :class="{ active: currentLabType === 'sql-injection-2' }"
            @click="loadLab('sql-injection-2')">
            <i class="fas fa-angle-right"></i>
            <span>进阶SQL注入攻击练习</span>
          </div>
          <div 
            class="menu-item submenu-item" 
            :class="{ active: currentLabType === 'sql-injection-3' }"
            @click="loadLab('sql-injection-3')">
            <i class="fas fa-angle-right"></i>
            <span>高难度SQL攻击练习</span>
          </div>
        </div>
        
        <div class="menu-item" @click="toggleXssOptions">
          <i class="fas fa-code"></i>
          <span>XSS攻击练习</span>
          <i :class="showXssOptions ? 'fas fa-chevron-up' : 'fas fa-chevron-down'" class="ml-auto"></i>
        </div>
        <div v-show="showXssOptions" class="submenu">
          <div 
            class="menu-item submenu-item" 
            :class="{ active: currentLabType === 'xss-reflected' }"
            @click="loadLab('xss-reflected')">
            <i class="fas fa-angle-right"></i>
            <span>反射型XSS攻击练习</span>
          </div>
          <div 
            class="menu-item submenu-item" 
            :class="{ active: currentLabType === 'xss-stored' }"
            @click="loadLab('xss-stored')">
            <i class="fas fa-angle-right"></i>
            <span>存储型XSS攻击练习</span>
          </div>
        </div>
        
        <div 
          class="menu-item" 
          :class="{ active: currentLabType === 'brute-force' }"
          @click="loadLab('brute-force')">
          <i class="fas fa-key"></i>
          <span>弱密码破解</span>
        </div>
        <div class="menu-item" @click="toggleFileUploadOptions">
          <i class="fas fa-file-code"></i>
          <span>文件上传漏洞</span>
          <i :class="showFileUploadOptions ? 'fas fa-chevron-up' : 'fas fa-chevron-down'" class="ml-auto"></i>
        </div>
        <div v-show="showFileUploadOptions" class="submenu">
          <div 
            class="menu-item submenu-item" 
            :class="{ active: currentLabType === 'file-upload-1' }"
            @click="loadLab('file-upload-1')">
            <i class="fas fa-angle-right"></i>
            <span>文件上传漏洞练习</span>
          </div>
        </div>
        <div 
          class="menu-item" 
          :class="{ active: currentLabType === 'command-execution' }"
          @click="loadLab('command-execution')">
          <i class="fas fa-network-wired"></i>
          <span>命令执行</span>
        </div>
      </div>

      <div class="sidebar-footer">
        <div class="progress-summary">
          <div class="stats-title">攻防练习统计</div>
          <div class="stats-item">
            <span class="stats-label">成功次数:</span>
            <span class="stats-value success">{{ successCount }}</span>
          </div>
          <div class="stats-item">
            <span class="stats-label">失败次数:</span>
            <span class="stats-value failed">{{ failCount }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <main class="container main-content">


      <!-- 演练说明区 -->
      <section class="instructions-card">
        <div class="card-header">
          <h3>任务说明----{{pageContent.title}}</h3>
        </div>
        <div class="card-body" v-html="pageContent.instructions"></div>
      </section>

      <!-- 靶场内容区 -->
      <section class="lab-container">
        <!-- 使用条件渲染来决定显示什么内容 -->
        <div v-if="currentLabType === 'sql-injection-1'">
          <SqlWeb1 @attack-result="handleAttackResult"/>
        </div>
        <div v-else-if="currentLabType === 'sql-injection-2'">
          <SqlWeb2 @attack-result="handleAttackResult"/>
        </div>
        <div v-else-if="currentLabType === 'sql-injection-3'">
          <SqlWeb3 @attack-result="handleAttackResult"/>
        </div>
        <div v-else-if="currentLabType === 'xss-reflected'">
          <div class="lab-content">
            <p>反射型XSS攻击练习内容区域</p>
          </div>
        </div>
        <div v-else-if="currentLabType === 'xss-stored'">
          <div class="lab-content">
            <xssWeb1 />
          </div>
        </div>
        <div v-else-if="currentLabType === 'file-upload-1'">
          <div class="lab-content">
            <FileWeb1 />
          </div>
        </div>
        <div v-else-if="currentLabType === 'command-execution'">
          <div class="lab-content">
            <CmdWeb1 />
          </div>
        </div>
        <div v-else>
          <div class="lab-content">
            <p>请选择一个练习项目开始实训</p>
          </div>
        </div>
      </section>

      <!-- 提示与帮助区-->
      <section class="hints-card" v-if="pageContent.hints">
        <div class="card-header" @click="toggleHints">
          <h3>攻击路径提示 <i :class="showHints ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i></h3>
        </div>
        <div class="card-body" v-show="showHints" v-html="pageContent.hints"></div>
      </section>
    </main>

    <!-- 页脚 -->
    <footer class="platform-footer">
      <div class="container">
        靶场攻防练习平台
      </div>
    </footer>
  </div>
</template>

<script>
import SqlWeb1 from '@/components/flaw/SqlWeb1.vue';
import SqlWeb2 from "@/components/flaw/SqlWeb2.vue";
import SqlWeb3 from "@/components/flaw/SqlWeb3.vue";
import xssWeb1 from "@/components/flaw/XssWeb1.vue";
import FileWeb1 from "@/components/flaw/FileWeb1.vue";
import CmdWeb1 from "@/components/flaw/CmdWeb1.vue";

export default {
  name: 'FlawWeb',
  components: {
    SqlWeb1,
    SqlWeb2,
    SqlWeb3,
    xssWeb1,
    FileWeb1,
    CmdWeb1
  },
  data() {
    return {
      // 存储页面内容
      pageContent: {
        title: '模拟攻防练习',
        instructions: '<p>欢迎来到模拟练习，隔离环境已创建 | 请在左侧选择练习项目</p>',
        hints: '<p>这里可以查看答案提示</p>'
      },
      labHistory: [
        { id: 1, title: 'SQL注入基础练习', time: new Date() }
      ],
      activeLabId: 1,
      currentLabType: '',
      successCount: 0, // 成功次数
      failCount: 0,    // 失败次数
      showHints: false,  // 控制提示是否展开
      showSqlInjectionOptions: false,  // 控制SQL注入练习列表是否展开
      showXssOptions: false,  // 控制XSS练习列表是否展开
      showFileUploadOptions: false  // 控制文件上传练习列表是否展开
    };
  },
  methods: {
    // 返回首页
    goToHome() {
      // 添加确认弹窗
      if (confirm('确定要返回首页吗？')) {
        // 用户点击确定后执行返回首页操作
        this.$router.push('/ai-assistant');
      }
      // 用户点击取消则不执行任何操作
    },
    
    startNewLab() {
      alert('开始新练习');
    },
    
    selectLab(labId) {
      this.activeLabId = labId;
      alert(`切换到练习: ${labId}`);
    },
    
    formatTime(date) {
      return date.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
    },
    
    loadLab(labType) {
      this.currentLabType = labType;
      
      // 更新页面标题和说明
      switch(labType) {
        case 'sql-injection':
        case 'sql-injection-1':
          this.pageContent.title = '简易SQL注入靶场';
          this.pageContent.instructions = '<p>欢迎来到SQL注入练习靶场！请尝试通过SQL注入技术获取数据库中的敏感信息。</p>';
          this.pageContent.hints = '<p>提示：可以尝试使用万能密码绕过登录验证，例如用户名输入 admin\' OR \'1\'=\'1</p>';
          break;
        case 'sql-injection-2':
          this.pageContent.title = '进阶SQL注入靶场';
          this.pageContent.instructions = '<p>欢迎来到SQL注入练习靶场！请尝试通过SQL注入技术获取数据库中的敏感信息。</p>';
          this.pageContent.hints = '<p>双写绕过技术\n' +
              '在用户名输入框输入：\'OorR\'1\'=\'1\'--\n' +
              '原理：将关键字拆分为双写形式（OR → OorR），过滤后仍能还原为 OR\n' +
              '密码可留空，点击登录\n';
          break;
        case 'sql-injection-3':
          this.pageContent.title = '高难度SQL注入靶场';
          this.pageContent.instructions = '<p>欢迎来到SQL注入练习靶场！请尝试通过SQL注入技术获取数据库中的敏感信息。</p>';
          this.pageContent.hints = `<img src="${require('@/assets/img/flaw/sql3.png')}" alt="sql3" />`;
          break;
        case 'xss-reflected':
          this.pageContent.title = '反射型XSS攻击练习';
          this.pageContent.instructions = '<p>欢迎来到反射型XSS攻击练习靶场！请尝试通过反射型跨站脚本攻击获取用户信息。</p>';
          this.pageContent.hints = '<p>反射型XSS提示：尝试在URL参数中注入恶意脚本，观察是否在页面中直接反射执行</p>';
          break;
        case 'xss-stored':
          this.pageContent.title = '存储型XSS攻击练习';
          this.pageContent.instructions = '<p>欢迎来到存储型XSS攻击练习靶场！请尝试通过存储型跨站脚本攻击影响其他用户。</p>';
          this.pageContent.hints = `<img src="${require('@/assets/img/flaw/xss1.png')}" alt="xss1"/>`;
          break;
        case 'xss':
          this.pageContent.title = 'XSS攻击练习靶场';
          this.pageContent.instructions = '<p>欢迎来到XSS攻击练习靶场！请尝试通过跨站脚本攻击获取用户信息。</p>';
          this.pageContent.hints = '<p>提示：尝试在输入框中注入恶意脚本</p>';
          break;
        case 'brute-force':
          this.pageContent.title = '弱密码破解练习';
          this.pageContent.instructions = '<p>欢迎来到弱密码破解练习！请尝试通过暴力破解获取用户密码。</p>';
          this.pageContent.hints = '<p>提示：可以使用字典攻击或暴力破解工具</p>';
          break;
        case 'file-upload':
          this.pageContent.title = '文件上传漏洞练习';
          this.pageContent.instructions = '<p>欢迎来到文件上传漏洞练习！请尝试上传恶意文件获取服务器权限。</p>';
          this.pageContent.hints = '<p>提示：尝试绕过文件类型检查</p>';
          break;
        case 'file-upload-1':
          this.pageContent.title = '文件上传漏洞练习';
          this.pageContent.instructions = '<p>欢迎来到文件上传漏洞练习靶场！请尝试通过文件上传漏洞获取服务器权限。</p>';
          this.pageContent.hints = `<img src="${require('@/assets/img/flaw/file1.png')}" alt="file1" />`;
          break;
        case 'command-execution':
          this.pageContent.title = '命令执行漏洞练习';
          this.pageContent.instructions = '<p>欢迎来到命令执行漏洞练习！请尝试通过命令注入获取系统信息。</p>';
          this.pageContent.hints = '<p>（该练习为随机练习，请在具体练习中查看提示）提示：尝试在输入中注入系统命令</p>';
          break;
        default:
          this.pageContent.title = '靶场攻防练习';
          this.pageContent.instructions = '<p>欢迎来到模拟练习，隔离环境已创建 | 请在左侧选择练习项目</p>';
          this.pageContent.hints = '<p>这里可以查看答案提示</p>';
      }
      
      // 切换练习时默认隐藏提示
      this.showHints = false;
    },
    
    // 处理攻击结果
    handleAttackResult(result) {
      if (result.success) {
        this.successCount++;
      } else {
        this.failCount++;
      }
    },
    
    // 切换SQL注入练习选项显示/隐藏
    toggleSqlInjectionOptions() {
      this.showSqlInjectionOptions = !this.showSqlInjectionOptions;
    },
    
    // 切换XSS练习选项显示/隐藏
    toggleXssOptions() {
      this.showXssOptions = !this.showXssOptions;
    },
    
    // 切换文件上传练习选项显示/隐藏
    toggleFileUploadOptions() {
      this.showFileUploadOptions = !this.showFileUploadOptions;
    },
    
    // 切换提示显示/隐藏
    toggleHints() {
      this.showHints = !this.showHints;
    }
  }
};
</script>

<style scoped lang="css" src="@/assets/styles/flaw.css"></style>
